// 1. 全局引入vue
import Vue from 'vue'

// 2. 整个项目全局样式的重置(项目样式初始化)
import 'normalize.css/normalize.css' // A modern alternative to CSS resets

// 3. 全局引入ElementUI
/*
  使用ElementUI中的组件有两种方案:
  1) 完整引入  一次性把ElementUI中所有的组件导入项目
  2) 按需引入  要用到什么组件再去导入什么组件
  区别?
  1) 完整引入在打包时体积是比较大的, 按需引入在打包时体积是比较小的
  2) 完整引入相对按需引入, 会稍微微影响首屏的渲染速度
  如何选择?
  1) 如果是toC项目, 一般采用按需引入, 比如: 网站, 移动端的项目
  2) 如果项目中用到的组件非常多, 基本用的七七八八, 就采用完整引入
  3) 如果是面向内部员工使用的管理系统, 统一采用完整引入即可, 功能是第一位, 体验是第二位
*/
import ElementUI from 'element-ui' // ElementUI插件 内部继承了所有的Element组件
import 'element-ui/lib/theme-chalk/index.css' // ElementUI的样式文件
import locale from 'element-ui/lib/locale/lang/en' // 英文语言包

// 4. 全局引入样式文件
import '@/styles/index.scss' // global css

// 5. 全局引入组件入口文件
import App from './App'
// 6. 全局引入仓库系统(vuex)
import store from './store'
// 7. 全局引入路由系统
import router from './router'

// 8. 全局引入字体文件
import '@/icons' // icon
// 9. 全局引入权限控制文件
import '@/permission' // permission control

// 10. 全局注册ElementUI插件中的所有组件
Vue.use(ElementUI, { locale }) // set ElementUI lang to EN
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

// 将App.vue根组件转化成dom元素渲染到指定点
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
